<template>
  <div id="app">
    <header class="header">
      <nav>
        <router-link to="/home" class="r-link">首页</router-link>
        <router-link to="/advantage" class="r-link">招行ESG</router-link>
        <router-link to="/product" class="r-link">个人业务</router-link>
        <router-link to="/case" class="r-link">今日招行</router-link>
        <a href="https://cc.cmbchina.com/card/newcustomer.htm?WT.mc_id=N17PCGW10408944100ZH" target="_blank" class="r-link">信用卡</a>
        <router-link to="/login" class="r-link">登录</router-link>
        <router-link to="/Register" class="r-link">注册</router-link>
        <a href="https://m.cmbchina.com/app.html" class="r-link app-download">下载APP</a>
      </nav>
    </header>

    <div class="top-right-container">
      <ul>
        <li><a href="https://fin.paas.cmbchina.com/fininfo/serviceprice" target="_blank" rel="noopener noreferrer nofollow">服务价格</a></li>
        <li><a href="http://branch.cmbchina.com/" target="_blank" rel="noopener noreferrer nofollow">分行网站</a></li>
        <li><a href="http://map.cmbchina.com" target="_blank" rel="noopener noreferrer nofollow">网点地图</a></li>
        <li><a href="http://career.cmbchina.com/" target="_blank" rel="noopener noreferrer nofollow">人才招聘</a></li>
        <li><a title="用户进入无障碍模式后，若不用读屏软件可通过Ctrl+Alt+V 开启工具条声音获取语音提示" class="barrier_free" rel="noopener noreferrer nofollow"></a></li>
        <li><span>本网站支持IPv6</span></li>
        <li><a class="cmb_traditional" href="https://big5.cmbchina.com/gate/big5/www.cmbchina.com/" rel="noopener noreferrer nofollow">繁 </a>|&nbsp;<a href="http://english.cmbchina.com" target="_blank" rel="noopener noreferrer nofollow">EN</a></li>
      </ul>
    </div>

    <div class="content">
      <router-view />
    </div>

    <footer class="footer">
      <div class="w">
        <div class="service_info_list">
          <div class="contact_cmb">
            <div class="clear_float">
              <em class="contact_cmb_icon"></em>
              <p>联系招行</p>
            </div>
            <div class="contact_cmb_list">
              <div class="contact_cmb_item">
                <div class="dot"></div>
                <p>服务热线：95555</p>
              </div>
              <div class="contact_cmb_item">
                <div class="dot"></div>
                <p>境外服务热线：86-755-84391000</p>
              </div>
              <div class="contact_cmb_item">
                <div class="dot"></div>
                <p>信用卡服务热线：400-820-5555</p>
              </div>
              <div class="contact_cmb_item">
                <div class="dot"></div>
                <p>企业年金专线：4006095555</p>
              </div>
              <div class="contact_cmb_item">
                <div class="dot"></div>
                <p>私人银行服务专线：40066-95555</p>
              </div>
              <div class="contact_cmb_item">
                <div class="dot"></div>
                <p>钻石贵宾服务专线：40068-95555</p>
              </div>
              <div class="contact_cmb_item">
                <div class="dot"></div>
                <p>金葵花贵宾服务专线：40088-95555</p>
              </div>
            </div>
          </div>
          <div class="cmb_about">
            <div class="clear_float">
              <em class="cmb_about_icon"></em>
              <p>关于招行</p>
            </div>
            <div class="contact_cmb_list">
              <div class="contact_cmb_item">
                <div class="dot"></div>
                <a href="http://www.cmbchina.com/cmbir/" target="_blank" rel="noopener noreferrer nofollow">投资者关系</a>
              </div>
              <div class="contact_cmb_item">
                <div class="dot"></div>
                <a href="/about/?pageid=licence" target="_blank" rel="noopener noreferrer nofollow">金融许可信息</a>
              </div>
              <div class="contact_cmb_item">
                <div class="dot"></div>
                <a href="/about/?pageid=bizlicence" target="_blank" rel="noopener noreferrer nofollow">营业执照信息</a>
              </div>
              <div class="contact_cmb_item">
                <div class="dot"></div>
                <a href="/about/?pageid=Licenseinformation" target="_blank" rel="noopener noreferrer nofollow">经营证券期货业务许可信息</a>
              </div>
              <div class="contact_cmb_item">
                <div class="dot"></div>
                <a href="/about/?pageid=goodlink" target="_blank" rel="noopener noreferrer nofollow">友情链接</a>
              </div>
              <div class="contact_cmb_item">
                <div class="dot"></div>
                <a target="_blank" href="http://career.cmbchina.com/" rel="noopener noreferrer nofollow">人才招聘</a>
              </div>
              <div class="contact_cmb_item">
                <div class="dot"></div>
                <a href="/about/sitemap.aspx" target="_blank" rel="noopener noreferrer nofollow">网站地图</a>
              </div>
            </div>
          </div>
          <div class="website_security">
            <div class="clear_float">
              <em class="website_security_icon"></em>
              <p>网站安全</p>
            </div>
            <div class="contact_cmb_list">
              <div class="contact_cmb_item">
                <div class="dot"></div>
                <a href="/about/?pageid=security" target="_blank" rel="noopener noreferrer nofollow">安全说明</a>
              </div>
              <div class="contact_cmb_item">
                <div class="dot"></div>
                <a href="/about/?pageid=webnotice" target="_blank" rel="noopener noreferrer nofollow">网站声明</a>
              </div>
              <div class="contact_cmb_item">
                <div class="dot"></div>
                <a href="/about/?pageid=privacy" target="_blank" rel="noopener noreferrer nofollow">隐私保密条款</a>
              </div>
              <div class="contact_cmb_item">
                <div class="dot"></div>
                <a href="/CmbInfo/crp/" target="_blank" rel="noopener noreferrer nofollow">消费者权益保护</a>
              </div>
            </div>
          </div>
          <div class="feedback">
            <div class="clear_float">
              <em class="feedback_icon"></em>
              <p>投诉建议</p>
            </div>
            <div class="contact_cmb_list">
              <div class="contact_cmb_item">
                <div class="dot"></div>
                <p>客户投诉电话：95555转7</p>
              </div>
              <div class="contact_cmb_item">
                <div class="dot"></div>
                <p>信用卡投诉电话：4008205555转7</p>
              </div>
              <div class="contact_cmb_item">
                <div class="dot"></div>
                <p>总行消费者投诉受理邮箱：xfzts@cmbchina.com</p>
              </div>
              <div class="contact_cmb_item multiline_text_height">
                <div class="dot"></div>
                <p class="multiline_text">总行信函投诉地址：深圳市福田区深南大道7088号招商银行大厦消费者权益保护中心</p>
              </div>
              <div class="contact_cmb_item">
                <div class="dot"></div>
                <p>邮政编码：518040</p>
              </div>
              <div class="contact_cmb_item">
                <div class="dot"></div>
                <p>信访邮箱、来信来访地址同投诉受理途径</p>
              </div>
              <div class="contact_cmb_item">
                <div style="background: url('https://wwwcdn.cmbimg.com/images/click_point.png') no-repeat; width: 22px; height: 16px; float: left; margin-left: 35px; margin-top: 2px;"></div>
                <div>
                  <a href="/CmbInfo/crp/ContentInfo.aspx?guid=fe357db8-f969-4d07-a97f-96783731d9de" target="_blank" style="color: #4986e8!important; margin-left: 6px;" rel="noopener noreferrer nofollow">点击查看投诉处理流程及投诉受理途径说明</a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="web_certify">
          <div class="container">
            <ul>
              <li>
                <a target="_blank" href="http://szcert.ebs.org.cn/418b33e0-18a9-4206-bb61-1c201322a400" rel="noopener noreferrer nofollow">
                  <img src="https://wwwcdn.cmbimg.com/images/gongshang.jpg" alt="工商网监标志" class="small">
                </a>
              </li>
              <li>
                <a target="_blank" rel="noopener noreferrer nofollow">
                  <img src="https://wwwcdn.cmbimg.com/images/wangan.gif" alt="网络安全标志" class="small">
                </a>
              </li>
              <li>
                <a rel="noopener noreferrer nofollow">
                  <img src="https://wwwcdn.cmbimg.com/images/knetseallogo.png" alt="可信网站" class="medium">
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="copyright">
          <p>&copy; <a href="https://baike.baidu.com/item/%E6%8B%9B%E5%95%86%E9%93%B6%E8%A1%8C/379100" target="_blank">了解招行</a> 招商银行一网通创建于一九九七年 © 2021 招商银行 版权所有 粤ICP备17088997号 粤公网安备 44030402004984号</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f9;
}

.header {
  background-color: #ff6600;
  color: white;
  padding: 10px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header nav {
  display: flex;
  gap: 20px;
}

.r-link {
  color: white;
  text-decoration: none;
  font-weight: bold;
}

.r-link:hover {
  text-decoration: underline;
}

.app-download {
  background-color: white;
  color: #ff6600;
  border-radius: 4px;
  padding: 5px 10px;
  transition: background-color 0.3s, color 0.3s;
}

.app-download:hover {
  background-color: #e65c00;
  color: white;
}

.top-right-container {
  background-color: #fff;
  padding: 10px 20px;
  border-bottom: 1px solid #ddd;
}

.top-right-container ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: flex-end;
  gap: 20px;
}

.top-right-container li {
  margin: 0;
}

.content {
  min-height: calc(100vh - 120px);
  padding: 20px;
}

.footer {
  background-color: #333;
  color: white;
  padding: 20px;
  text-align: left;
}

.w {
  max-width: 1200px;
  margin: 0 auto;
}

.service_info_list {
  background-color: #444;
  padding: 20px;
  border-radius: 5px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.contact_cmb,
.cmb_about,
.website_security,
.feedback {
  padding: 10px;
  border-radius: 5px;
}

.clear_float em {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-right: 10px;
}

.contact_cmb_icon {
  background-image: url('https://img.alicdn.com/imgextra/i4/O1CN01XyGxQw1VHtqTzgBhR_!!6000000007112-2-tps-200-50.png');
}

/* .cmb_about_icon,
.website_security_icon,
.feedback_icon {
  /* Add icons if needed 
} */

.contact_cmb_list {
  margin-top: 10px;
}

.contact_cmb_item {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.dot {
  width: 5px;
  height: 5px;
  background-color: #ff6600;
  border-radius: 50%;
  margin-right: 10px;
}

.contact_cmb_item a {
  color: white;
  text-decoration: none;
}

.contact_cmb_item a:hover {
  text-decoration: underline;
}

.web_certify {
  text-align: center;
  margin-top: 20px;
}
.ad-image {
    width: 1250px; /* 设置宽度 */
    height: 760px; /* 设置高度 */
    object-fit: cover; /* 确保图片不会变形 */
}
.adimg1 p img{
    width:1250px;
    height:775px;
}
.adimg2 p img{
    width:1250px;
    height:500px;
}
/* 添加到您的样式文件中 */
.responsive-image {
    width: 100%; /* 图片宽度为父容器的100% */
    height: auto; /* 保持图片的宽高比 */
    max-width: 1250px; /* 设置最大宽度 */
    max-height: 775px; /* 设置最大高度 */
    display: block; /* 确保图片不会在块级元素中产生额外的空白空间 */
}

.adimg3 {
    text-align: center; /* 居中显示图片 */
}
.web_certify .container ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
  justify-content: center;
  gap: 10px;
}

.web_certify img.small,
.web_certify img.medium {
  width: 50px;
  height: auto;
}

.copyright {
  margin-top: 20px;
  border-top: 1px solid #444;
  padding-top: 10px;
  text-align: center;
}

.copyright p {
  margin: 0;
  font-size: 14px;
}
.home-container {
    max-width: 1200px;
    margin: auto;
}

.featured-ad {
    padding: 20px;
    text-align: center;
    background-color: #f8f8f8;
    border-radius: 8px;
    margin-bottom: 20px;
}

.featured-ad img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: auto;
}

.featured-ad p {
    font-size: 1.2em;
    color: #333;
    margin-top: 10px;
}

.main-banner ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.banner-item {
    margin-bottom: 20px;
}

.banner-link {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

.banner-img {
    width: 100%;
    height: auto;
    display: block;
}

.banner-name {
    position: absolute;
    bottom: 10px;
    left: 10px;
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 5px 10px;
    border-radius: 4px;
}
.slide_ct {
    position: relative;
    margin-top: 50px;
}
.adimg1 {
    display: flex;
    flex-direction: column; /* 默认垂直排列 */
    align-items: center; /* 水平居中 */
}

.featured-ad, .additional-image-container {
    margin: 10px 0; /* 上下间距 */
}

.ad-image, .additional-image {
    max-width: 100%; /* 确保图片不会超出容器宽度 */
    height: auto; /* 保持图片宽高比 */
    border-radius: 5px; /* 圆角边框 */
}
#column_main_news {
    width: 1200px;
    margin: 0 auto;
    min-height: 364px;
    margin-top: 30px;
}
.center_con_news {
    width: 1395px;
    height: 285px;
    float: left;
    margin: 0px 0px 0px 167px;
    background-color: #F8F8F8;
}
.news_head {
    margin: 25px 0 0 385px;
    height: 32px;
    width: 638px;
    line-height: 32px;
}
.news_head .head_left {
    float: left;
    width: 387px;
}
.news_more {
    border: 0px;
    float: right;
    margin: 0px 0px 0px 8px;
}
.center_con_newsinfo {
    float: left;
    width: 640px;
    display: inline;
    margin: 8px 0 0 385px;
}
.news_list {
    margin: 0px;
    float: left;
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
}
.news_list li {
    list-style: none;
    line-height: 24px;
    color: #333;
    float: left;
    height: 40px;
    line-height: 40px;
    width: 100%;
}
.news_list li a:link {
    color: #333;
    text-decoration: none;
}
.news_list li a {
    margin-left: 0px;
    color: #333;
}
.connews_img {
    margin: 50px 0px 0px 0px;
    float: left;
    position: absolute;
}
</style>